<template>
	<div class="recommend-chapter">
		<div class="left" v-lazy:background-image="$store.getters.getImgURL(260,260,1)">
			<router-link :to="'/BlogChapter'">
				<RecommentItem>
					<span slot="title">剪影流殇，光影华年</span>
					<span slot="contain">染指流沙，回绕不尽的世界繁华； 青灯孤伴，镌刻不完的午夜落花； 锦帛残卷，撰写不到的城南旧事； 蓦然回首，消逝不见的绝美年华。</span>
				</RecommentItem>
			</router-link>
		</div>
		<div class="right">
			<div class="top" v-lazy:background-image="$store.getters.getImgURL(260,260,2)">
				<a href="">
					<RecommentItem>
						<span slot="title">2021年随笔</span>
					</RecommentItem>
				</a>
			</div>
			<div class="bottom" v-lazy:background-image="$store.getters.getImgURL(260,260,3)">
				<a href="">
					<RecommentItem>
						<span slot="title">如许相诺，谁念</span>
					</RecommentItem>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
    import RecommentItem from "./RecommentItem";
		export default {
        name: "RecommendChapter",
			components: {RecommentItem}
		}
</script>

<style scoped>
	@media screen and (max-width: 992px) {
		a {
			text-decoration: none;
		}
		.recommend-chapter {
			height: 7rem;
			flex-direction: column;
		}
		.recommend-chapter .left
		{
			flex: 1;
		}
		.recommend-chapter .right {
			flex: 2;
		}
		.recommend-chapter .right .top {
			margin-top: .1rem;
		}
	}
	@media screen and (min-width: 993px) {

		.home-content .recommend-chapter {
			height: 3.8rem;
			align-items: center;
			flex-direction: row;
		}
		.recommend-chapter .left,
		.recommend-chapter .right {
			height: 100%;
			flex: 1;
		}
		.recommend-chapter .right {
			padding-left: .2rem;
		}
	}

	.recommend-chapter {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.recommend-chapter .right {
		display: flex;
		flex-direction: column;
	}
	.recommend-chapter .left,
	 .recommend-chapter .right .top,
	.recommend-chapter .right .bottom{
		width: 100%;
		height: 100%;
		background-size: cover;
		border-radius: .05rem;
	}
	.recommend-chapter .left[lazy="loading"],
	.recommend-chapter .right .top[lazy="loading"],
	.recommend-chapter .right .bottom[lazy="loading"] {
		background-size: auto 50%;
		background-repeat: no-repeat;
		background-position: center;
	}
	.recommend-chapter .left[lazy="error"],
	.recommend-chapter .right .top[lazy="error"],
	.recommend-chapter .right .bottom[lazy="error"] {
		background-size: 100% 100%;
	}
	.recommend-chapter .left[lazy="loading"]>a,
	.recommend-chapter .right .top[lazy="loading"]>a,
	.recommend-chapter .right .bottom[lazy="loading"]>a {
		display: none;
	}
	.recommend-chapter .left[lazy="error"]>a,
	.recommend-chapter .right .top[lazy="error"]>a,
	.recommend-chapter .right .bottom[lazy="error"]>a {
		display: none;
	}
	.recommend-chapter .right .top {
		margin-bottom: .1rem;
	}
</style>
